import React, { useState, useEffect } from 'react';
import classnames from 'classnames';
import moment from 'moment';
import { connect } from 'dva';
import { Button, Form, Select, Table, Empty, Modal, message } from 'antd';
import TPage from '@/modules/TPage';
import Service from '@/public/http/services';
import { LevelStyle } from '@/public/constant/enums';
import style from './index.css';
const { Option } = Select;
const { Column } = Table;
const List: React.FC<any> = ({ total, list, dispatch }) => {
  const [curPage, setCurPage] = useState(1);
  const [curNickName, setCurNickName] = useState(null);
  const pageSize = 10;
  /**
   * 加载列表数据
   */
  function fetchList({ page, nickname }) {
    dispatch({
      type: 'chargeBackManagement/fetchList',
      payload: {
        page,
        pageSize
      }
    })
  }

  /**
   * @desc 操作完更新列表
   */
  function reFetchList() {
    fetchList({
      page: curPage,
      nickname: curNickName
    })
  }


  useEffect(({ page = curPage, nickname = curNickName } = {}) => {
    fetchList({ page, nickname })
  }, [curPage, curNickName])
  // 渲染列表查询表单

  const handleQuery = (query) => {
    setCurPage(1);
    setCurNickName(query);
  }


  return (
    <TPage>
      <TPage.Title>订单管理列表</TPage.Title>
      <TPage.Table>
        <TPage.Layout className={style.action_block}>
          <TPage.Search
            placeholder={'请输入订单名称，可按回车键搜索'}
            onSearch={handleQuery}
          />
        </TPage.Layout>
        <Table
          className={classnames(style.mt16, style.expert_list)}
          locale={{ emptyText: <Empty description={'无数据'} /> }}
          dataSource={list}
          pagination={{ total, current: curPage, pageSize, onChange: setCurPage }}
          rowKey={(record: any) => record.orderNo}
        >
          <Column title={'订单号'} dataIndex={'orderNo'} key={'orderNo'} />
          <Column title={'订单价格(元)'} dataIndex={'price'} key={'price'} />
          <Column title={'审批状态'} dataIndex={'applyStatus'} key={'applyStatus'} />
          <Column title={'退款状态'} dataIndex={'refundType'} key={'refundType'} render={(value) => <span style={LevelStyle[value]}>{value}</span>} />
          <Column title={'退款拒绝原因'} dataIndex={'rejectReasons'} key={'rejectReasons'}/>
          <Column title={'更新时间'} dataIndex={'updateTime'} key={'updateTime'} render={(value) => value && moment(value).format('YYYY-MM-DD hh:mm:ss')} />
          <Column title={'创建时间'} dataIndex={'createTime'} key={'createTime'} render={(value) => moment(value).format('YYYY-MM-DD hh:mm:ss')} />
        </Table>
      </TPage.Table>
    </TPage>
  );
}
export default connect((state: any) => {
  return {
    list: state.chargeBackManagement.list,
    total: state.chargeBackManagement.total,
  };
})(List);
